<script setup lang="ts">
import {useSettingsStore} from "@/store/modules/settings";

const settingsStore = useSettingsStore();
const value1 = ref(12)
const value3 = ref(0)

watch(value1, (value) => {
  const emValue = value / 16
  document.documentElement.style.setProperty('--my-card-margin', emValue + 'em')
  settingsStore.cardMargin = value
})

onMounted(() => {
  value1.value = settingsStore.cardMargin
})
</script>

<template>
  <!--设置-->
  <x-card>
    <el-row>
      <el-col :span="11">
        <span>设置间距(单位px,本地生效,不保存服务器):</span>
        <el-slider v-model="value1" :min="10" :max="30" :step="2"/>
      </el-col>
      <el-col :span="2">
      </el-col>
      <el-col :span="11">
        <span>设置颜色(待实现):</span>
        <el-slider v-model="value3" :max="10" :step="2"/>
      </el-col>
    </el-row>
  </x-card>

  <div class="flex flex-wrap">
    <x-card class="w-10em h-8em " v-for="item in 20"></x-card>
  </div>
</template>

<style scoped lang="scss">
</style>